<template>
  <div class="box">
    <div id="content" class="container">
      <div class="user-icon">
        <div class="left-icon" @click="goMyNews">
          <!---->
          <img src="@/assets/img/icon-message@2x.png" style="width: 26px; height: 26px;" alt />
        </div>
        <div class="right-icon">
          <div class="user-setting">
            <img
              src="@/assets/img/icon-setting@2x.png"
              @click="goToSetting()"
              style="width: 26px; height: 26px;"
              alt
            />
          </div>
        </div>
      </div>
      <div class="user-info-box logined" v-if="isUserInfo">
        <div class="user-avatar-box">
          <img :src="myInfo.avatar" alt />
        </div>
        <div class="user-body" @click="goLogin()">
          <div class="user-nickname">{{myInfo.nick_name}}</div>
          <div class="role-name">{{ myInfo.role ? myInfo.role.name : "免费会员" }}</div>
        </div>
        <div class="user-back">
          <img src="@/assets/img/icon-prev.png" style="width: 12px; height: 12px;" alt />
        </div>
      </div>
      <div class="user-info-box" v-else>
        <div class="user-avatar-box">
          <img src="@/assets/img/default_avatar.png" alt />
        </div>
        <div class="user-body" @click="goLogin()">
          <div class="login-button">请登录</div>
        </div>
        <div class="user-back">
          <img src="@/assets/img/icon-prev.png" style="width: 12px; height: 12px;" alt />
        </div>
      </div>
      <div class="vip-banner-box" @click="goToVIP()">
        <img src="@/assets/img/VIPcenter@2x.png" alt />
      </div>
      <div class="user-banner-item">
        <div class="banner-title">我的账号</div>
        <div class="banner-body">
          <div class="grid-box">
            <div class="grid-item" @click="goOrder()">
              <div class="icon">
                <div class="icon-img">
                  <img src="@/assets/img/icon-list@2x.png" />
                </div>
              </div>
              <div class="name">我的订单</div>
            </div>
            <!---->
            <div class="grid-item" @click="goGrid()">
              <div class="icon">
                <div class="icon-img">
                  <img src="@/assets/img/icon-money@2x.png" alt />
                </div>
              </div>
              <div class="name">我的邀请</div>
            </div>
          </div>
        </div>
      </div>
      <!---->
      <!---->
      <TechSupport></TechSupport>
    </div>

    <!-- 底部导航栏开始 -->
    <KPFoot type="member"></KPFoot>
    <!-- 底部导航栏结束 -->
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

import KPFoot from "@/components/KPFoot.vue";
import TechSupport from "@/components/TechSupport.vue";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    KPFoot,
    TechSupport,
    TechSupport
  },
  data() {
    //这里存放数据
    return {
      isUserInfo: false,
      myInfo: {}
      // myName: ""
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    userLogin: function() {},
    goToSetting: function() {
      this.$router.push({
        path: "/member/setting"
      });
    },
    goMyNews: function() {
      this.$router.push({
        path: "/member/mynews"
      });
    },
    goLogin: function() {
      let token = localStorage.getItem("h5-token");
      if (token) {
        this.$router.push({
          path: "/member/mymsg"
        });
      } else {
        this.$router.push({
          path: "/login",
          query: {
            url: window.location.href
          }
        });
      }
    },
    goGrid: function() {
      this.$router.push({
        path: "/member/promocode"
      });
    },

    goOrder: function() {
      this.$router.push({
        path: "/member/order"
      });
    },
    goToVIP: function() {
      this.$router.push({
        path: "/member/vip"
      });
    }
  },
  created() {
    let token = localStorage.getItem("h5-token");
    if (token) {
      (this.isUserInfo = true),
        this.$request.get("/api/v2/member/detail").then(res => {
          this.myInfo = res.data;
          this.myName = res.data.role.name;
        });
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  .container {
    margin-bottom: 53px;
    background: #f3f6f9;
    position: absolute;
    left: 0;
    top: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    width: 100%;
    height: 100%;
    .user-icon {
      width: 100%;
      background: #fff;
      height: auto;
      float: left;
      box-sizing: border-box;
      padding: 20px 15px 0 15px;
      display: flex;
      justify-content: space-between;
      .left-icon {
        position: relative;
        width: 26px;
        height: 26px;
        img {
          width: 26px;
          height: 26px;
        }
      }

      .right-icon {
        flex: 1;
        display: flex;
        flex-direction: row-reverse;
        .user-setting {
          position: relative;
          width: 26px;
          height: 26px;
          img {
            width: 26px;
            height: 26px;
          }
        }
      }
    }

    .user-info-box {
      width: 100%;
      background: #fff;
      height: auto;
      float: left;
      box-sizing: border-box;
      padding: 25px 15px 30px 15px;
      display: flex;
      align-items: center;
      .user-avatar-box {
        width: auto;
        height: 64px;
        box-sizing: border-box;
        padding-right: 15px;
        img {
          width: 64px;
          height: 64px;
          border-radius: 50%;
        }
      }

      .user-body {
        flex: 1;
        height: 64px;
        .login-button {
          width: 100%;
          height: auto;
          float: left;
          font-size: 16px;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.7);
          line-height: 64px;
        }
      }

      .user-back {
        img {
          width: 12px;
          height: 12px;
        }
      }
    }
    .logined {
      .user-avatar-box {
        img {
        }
      }

      .user-body {
        .user-nickname {
          width: 100%;
          height: auto;
          float: left;
          box-sizing: border-box;
          padding-top: 10px;
          padding-bottom: 15px;
          font-size: 16px;
          font-weight: 600;
          color: #333;
          line-height: 16px;
        }

        .role-name {
          width: 100%;
          height: auto;
          float: left;
          font-size: 13px;
          font-weight: 400;
          color: #666;
          line-height: 13px;
        }
      }

      .user-back {
        img {
        }
      }
    }
    .vip-banner-box {
      width: 100%;
      height: 60px;
      float: left;
      background: #fff;
      text-align: center;
      img {
        height: 60px;
      }
    }

    .user-banner-item {
      width: 100%;
      height: auto;
      float: left;
      background-color: #fff;
      box-sizing: border-box;
      padding: 30px 15px;
      margin-bottom: 10px;
      .banner-title {
        width: 100%;
        height: auto;
        float: left;
        margin-bottom: 25px;
        font-size: 15px;
        font-weight: 600;
        color: #333;
        line-height: 15px;
      }

      .banner-body {
        width: 100%;
        height: auto;
        float: left;
        .grid-box {
          display: grid;
          gap: 20px;
          grid-template-columns: repeat(4, minmax(0, 1fr));
          box-sizing: border-box;
          padding-left: 15px;
          padding-right: 15px;
          .grid-item {
            .icon {
              width: 100%;
              height: auto;
              float: left;
              margin-bottom: 10px;
              text-align: center;
              .icon-img {
                display: inline-block;
                img {
                  width: 30px;
                  height: 30px;
                }
              }
            }

            .name {
              width: 100%;
              height: auto;
              float: left;
              font-size: 12px;
              font-weight: 400;
              color: #333;
              line-height: 12px;
              text-align: center;
            }
          }
        }
      }
    }
  }
}
</style>
